<template>
  <div class="">
    <el-icon size="25" @click="toggleCollapse">
      <!-- 根据 expanded 的值显示不同的图标 -->
      <template v-if="aside.isCollapse">
        <Expand />
      </template>
      <template v-else>
        <Fold />
      </template>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import {useLayouts} from "@/stores/modules/layouts.ts";

// 获取 layouts 状态
const layouts = useLayouts()
// 使用 storeToRefs 解构出来的属性默认是只读的，不能改变值，修改也无法响应式更新
const { aside } = storeToRefs(layouts)

const toggleCollapse = () => {
  aside.value.isCollapse = !aside.value.isCollapse
}
</script>

<style scoped lang="scss">

</style>